<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Draw a polygon and calculate its area</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="../../lib/mapbox-gl.js"></script>
    <link href="../../lib/mapbox-gl.css" rel="stylesheet" />
    <script src="../../lib/axios.min.js"></script>
    <script src="../../lib/turf.min.js"></script>
    <script src="../../lib/mapbox-gl-draw.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox-gl-draw.css" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .calculation-box {
        height: 75px;
        width: 150px;
        position: absolute;
        bottom: 40px;
        left: 10px;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 15px;
        text-align: center;
      }

      p {
        font-family: "Open Sans";
        margin: 0;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div class="calculation-box">
      <p>Draw a polygon using the draw tools.</p>
      <div id="calculated-area"></div>
    </div>
    <script>
      let baseDataUrl = `http://${localStorage.getItem(
        "host"
      )}/mapbox-gl-js-offline-examples`;
      axios
        .get(
          baseDataUrl +
            `/resources/styles/${localStorage.getItem(
              "mbtilesStylesName"
            )}.json`
        )
        .then((res) => {
          let data = res.data;
          initMap(data);
        })
        .catch((err) => {
          console.error(err);
        });

      function initMap(style) {
        let map = new mapboxgl.Map({
          container: "map",
          center: [116.392, 39.913],
          zoom: 14,
          bearing: -2.5,
          style: style,
        });
        var draw = new MapboxDraw({
          displayControlsDefault: false,
          controls: {
            polygon: true,
            trash: true,
          },
          defaultMode: "draw_polygon",
        });
        map.addControl(draw);

        map.on("draw.create", updateArea);
        map.on("draw.delete", updateArea);
        map.on("draw.update", updateArea);

        function updateArea(e) {
          var data = draw.getAll();
          var answer = document.getElementById("calculated-area");
          if (data.features.length > 0) {
            var area = turf.area(data);
            // restrict to area to 2 decimal points
            var rounded_area = Math.round(area * 100) / 100;
            answer.innerHTML =
              "<p><strong>" +
              rounded_area +
              "</strong></p><p>square meters</p>";
          } else {
            answer.innerHTML = "";
            if (e.type !== "draw.delete")
              alert("Use the draw tools to draw a polygon!");
          }
        }
      }
    </script>
  </body>
</html>
